<template>
  <div class="projects-more">
     <head-usual :title="title" :to="to"></head-usual>
     <!-- 项目基本情况 -->
     <div class="project-info">
         <div class="info-hd">
             <div class="hd-1">
                 <p class="title">{{job.name}}</p>
                 <p class="price">{{job.lowSalary}}</p>
             </div>
             <div class="hd-2">
                 <p>{{job.City}}</p>
                 <span></span>
                 <p>{{job.experience}}</p>
                 <span></span>
                 <p>{{job.degree}}</p>
                 <span></span>
                 <p>{{job.nature}}</p>
             </div>
             <div class="hd-3">
                 <!-- <p>
                     <span>周期：</span>
                     <span>2018.11.22-2018.12.12</span>
                 </p> -->
                 <p>
                     <span>12-26</span>
                     <span>发布于筑功者</span>
                 </p>
             </div>

         </div>
         <div class="info-ft">
             <div class="title">
                 项目职责：
             </div>
             <p class="ft-html" v-html="job.description">
                
             </p>
             <router-link class="learn-more" :to="'/jobs/detail/'+job.id">了解更多</router-link>
         </div>
     </div>
     <div class="select-menu">
         <mt-navbar v-model="status">
            <mt-tab-item id="0">候选人</mt-tab-item>
            <mt-tab-item id="1">被查看</mt-tab-item>
            <mt-tab-item id="2">待沟通</mt-tab-item>
            <mt-tab-item id="3">面试</mt-tab-item>
            <mt-tab-item id="4">不合格</mt-tab-item>
             <mt-tab-item id="5">录用</mt-tab-item>
        </mt-navbar>
     </div>
<!-- tab-container -->
        <mt-tab-container v-model="status" swipeable>
                <mt-tab-container-item id="0">
                     <div class="candidate">
                    <!-- 候选人 -->
                      <div class="candidate-item" v-for="(item,index) in memberList" :key="index">
                             <router-link :to="'/m/'+item.id">
                            <dl>
                            <dt>
                                <img :src="item.headportrait"/>
                            </dt>
                            <dd>
                                <p class="dd-p1">
                                    <span class="p1-name">{{item.name}}</span>
                                    <span class="fenge"></span>
                                    <span class="p1-name">建筑设计师</span>
                                    <span class="p1-slogan">{{item.type}}</span>
                                </p>
                                <p class="dd-p2">
                                    <span v-for="(tag,index) in item.Arr_tags" :key="index">{{tag}}</span>
                                </p>
                                <!-- <p class="dd-p3">
                                    <span>参与理由：</span>
                                    <span>我有一个很好的项目经验，挺好的如果可以面谈...</span>
                                    <span class="read-more" @click="readMore">查看更多</span>
                                </p> -->
                                 <p class="dd-p4">
                                    <span>学历：</span>
                                    <span>{{item.degree}}</span>
                                    <span class="fenge"></span>
                                    <span>工作经验：</span>
                                    <span>{{item.expyear}}</span>
                                </p>
                                  <p class="lookresume">
                                   <router-link :to="'/user/resume2/'+item.id">查看简历</router-link>
                                </p>
                            </dd>
                            </dl>
                            </router-link>
                            <div class="item-edit">
                                <div class="edit-left" @click="BeViewed(item.id,job.id,index)">被查看</div>
                                <p class="fenge"></p>
                                <div @click="editMore(index,item.id)">更多操作</div>
                            </div>
                      </div>               
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="1">
                 <div class="candidate">
                       <div class="candidate-item" v-for="(item,index) in memberList" :key="index">
                                <router-link :to="'/m/'+item.id">
                            <dl>
                            <dt>
                                <img :src="item.headportrait"/>
                            </dt>
                            <dd>
                                <p class="dd-p1">
                                    <span class="p1-name">{{item.name}}</span>
                                    <span class="fenge"></span>
                                    <span class="p1-name">建筑设计师</span>
                                    <span class="p1-slogan">{{item.type}}</span>
                                </p>
                                <p class="dd-p2">
                                    <span v-for="(tag,index) in item.Arr_tags" :key="index">{{tag}}</span>
                                </p>
                                <!-- <p class="dd-p3">
                                    <span>参与理由：</span>
                                    <span>我有一个很好的项目经验，挺好的如果可以面谈...</span>
                                    <span class="read-more" @click="readMore">查看更多</span>
                                </p> -->
                                 <p class="dd-p4">
                                    <span>学历：</span>
                                    <span>{{item.degree}}</span>
                                    <span class="fenge"></span>
                                    <span>工作经验：</span>
                                    <span>{{item.expyear}}</span>
                                </p>
                               <p class="lookresume">
                                   <router-link :to="'/user/resume2/'+item.id">查看简历</router-link>
                                </p>
                            </dd>
                            </dl>
                            </router-link>
                      </div>  
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                         <div class="candidate">
                       <div class="candidate-item" v-for="(item,index) in memberList" :key="index">
                                <router-link :to="'/m/'+item.id">
                            <dl>
                            <dt>
                                <img :src="item.headportrait"/>
                            </dt>
                            <dd>
                                <p class="dd-p1">
                                    <span class="p1-name">{{item.name}}</span>
                                    <span class="fenge"></span>
                                    <span class="p1-name">建筑设计师</span>
                                    <span class="p1-slogan">{{item.type}}</span>
                                </p>
                                <p class="dd-p2">
                                    <span v-for="(tag,index) in item.Arr_tags" :key="index">{{tag}}</span>
                                </p>
                                <!-- <p class="dd-p3">
                                    <span>参与理由：</span>
                                    <span>我有一个很好的项目经验，挺好的如果可以面谈...</span>
                                    <span class="read-more" @click="readMore">查看更多</span>
                                </p> -->
                                 <p class="dd-p4">
                                    <span>学历：</span>
                                    <span>{{item.degree}}</span>
                                    <span class="fenge"></span>
                                    <span>工作经验：</span>
                                    <span>{{item.expyear}}</span>
                                </p>
                                <p class="lookresume">
                                   <router-link :to="'/user/resume2/'+item.id">查看简历</router-link>
                                </p>
                            </dd>
                            </dl>
                            </router-link>
                      </div>  
                    </div>
                  
                </mt-tab-container-item>
                <mt-tab-container-item id="3">
                           <div class="candidate">
                       <div class="candidate-item" v-for="(item,index) in memberList" :key="index">
                          <router-link :to="'/m/'+item.id">
                            <dl>
                            <dt>
                                <img :src="item.headportrait"/>
                            </dt>
                            <dd>
                                <p class="dd-p1">
                                    <span class="p1-name">{{item.name}}</span>
                                    <span class="fenge"></span>
                                    <span class="p1-name">建筑设计师</span>
                                    <span class="p1-slogan">{{item.type}}</span>
                                </p>
                                <p class="dd-p2">
                                    <span v-for="(tag,index) in item.Arr_tags" :key="index">{{tag}}</span>
                                </p>
                                <!-- <p class="dd-p3">
                                    <span>参与理由：</span>
                                    <span>我有一个很好的项目经验，挺好的如果可以面谈...</span>
                                    <span class="read-more" @click="readMore">查看更多</span>
                                </p> -->
                                 <p class="dd-p4">
                                    <span>学历：</span>
                                    <span>{{item.degree}}</span>
                                    <span class="fenge"></span>
                                    <span>工作经验：</span>
                                    <span>{{item.expyear}}</span>
                                </p>
                                <p class="lookresume">
                                   <router-link :to="'/user/resume2/'+item.id">查看简历</router-link>
                                </p>
                            </dd>
                            </dl>
                            </router-link>
                      </div>  
                    </div>
               
                </mt-tab-container-item>
                 <mt-tab-container-item id="4">
                           <div class="candidate">
                       <div class="candidate-item" v-for="(item,index) in memberList" :key="index">
                               <router-link :to="'/m/'+item.id">
                            <dl>
                            <dt>
                                <img :src="item.headportrait"/>
                            </dt>
                            <dd>
                                <p class="dd-p1">
                                    <span class="p1-name">{{item.name}}</span>
                                    <span class="fenge"></span>
                                    <span class="p1-name">建筑设计师</span>
                                    <span class="p1-slogan">{{item.type}}</span>
                                </p>
                                <p class="dd-p2">
                                    <span v-for="(tag,index) in item.Arr_tags" :key="index">{{tag}}</span>
                                </p>
                                <!-- <p class="dd-p3">
                                    <span>参与理由：</span>
                                    <span>我有一个很好的项目经验，挺好的如果可以面谈...</span>
                                    <span class="read-more" @click="readMore">查看更多</span>
                                </p> -->
                                 <p class="dd-p4">
                                    <span>学历：</span>
                                    <span>{{item.degree}}</span>
                                    <span class="fenge"></span>
                                    <span>工作经验：</span>
                                    <span>{{item.expyear}}</span>
                                </p>
                              <p class="lookresume">
                                   <router-link :to="'/user/resume2/'+item.id">查看简历</router-link>
                                </p>
                            </dd>
                            </dl>
                            </router-link>
                      </div>  
                    </div>  
                  </mt-tab-container-item>
                 <mt-tab-container-item id="5">
                            <div class="candidate">
                       <div class="candidate-item" v-for="(item,index) in memberList" :key="index">
                           <router-link :to="'/m/'+item.id">
                               <dl>
                                <dt>
                                    <img :src="item.headportrait"/>
                                </dt>
                                <dd>
                                    <p class="dd-p1">
                                        <span class="p1-name">{{item.name}}</span>
                                        <span class="fenge"></span>
                                        <span class="p1-name">建筑设计师</span>
                                        <span class="p1-slogan">{{item.type}}</span>
                                    </p>
                                    <p class="dd-p2">
                                        <span v-for="(tag,index) in item.Arr_tags" :key="index">{{tag}}</span>
                                    </p>
                                    <!-- <p class="dd-p3">
                                        <span>参与理由：</span>
                                        <span>我有一个很好的项目经验，挺好的如果可以面谈...</span>
                                        <span class="read-more" @click="readMore">查看更多</span>
                                    </p> -->
                                    <p class="dd-p4">
                                        <span>学历：</span>
                                        <span>{{item.degree}}</span>
                                        <span class="fenge"></span>
                                        <span>工作经验：</span>
                                        <span>{{item.expyear}}</span>
                                    </p>
                                </dd>
                            </dl>
                        </router-link> 
                      </div>  
                    </div>
                </mt-tab-container-item>
        </mt-tab-container>
        <!-- 点击查看更多弹出框 -->
        <mt-popup v-model="popupMore" popup-transition="popup-fade" class="read-popup">
                <p class="project-view">项目通知</p>
                <p class="detail">表决开始了，我在现场看到，党和国家领导人走到选票箱前投票，全场响起了热烈的掌声。随后，每个代表都双手握着选票，走到投票箱前，郑重地投下自己的一票。</p>
        </mt-popup>
        <!-- 弹出更多操作 -->
        <mt-popup v-model="popupEdit" position="bottom" class="edit-popup">
            <ul>
             
                <li @click="InviteHandle(2)">待沟通</li>
                <li @click="InviteHandle(3)">面试</li>
                <li @click="InviteHandle(4)">不合适</li>
             <li @click="InviteHandle(5)" class="li-last">录用</li>
            </ul>
            <p @click="closeEdit">取消</p>
        </mt-popup>
        <!-- 弹出通知面试 -->
        <mt-popup v-model="popupInvite" popup-transition="popup-fade" class="popup-invite">
            <p class="title">通知面试</p>
            <div class="time">
                <span>面试时间：</span>
                <span @click="pickerTime"  class="input-year ipt">{{invite.year}}</span><span class="time-s">年</span><span class="input-month ipt" @click="pickerTime">{{invite.month}}</span><span class="time-s">月</span><span class="input-day ipt" @click="pickerTime">{{invite.day}}</span><span class="time-s">日</span>
            </div>
            <div class="address">
                <span>面试地点：</span>
                <input type="text" v-model="invite.address"/>
            </div>
            <div class="extra">
                <textarea type="text" placeholder="例：x女士/x先生，您已通过公司考核，请于xx月xx日到xxx位置面试。(请记住添加时间、地点)"  v-model="invite.info"></textarea>
            </div>
            <div class="button-total">
               <mt-button type="primary" @click="ok">确认</mt-button>
                <mt-button type="default" @click="exit">取消</mt-button>
            </div>
        </mt-popup>
        <!-- 弹出选择年月日 -->
        <mt-datetime-picker v-model="pickerVisible" ref="picker" type="date" @confirm="handleConfirm" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日">
        </mt-datetime-picker>
        </div>
</template>

<script>
import { Navbar, TabItem,Button,DatetimePicker } from 'mint-ui';
import {Candidate,DeliveryFeedback} from '@/api/user/job';
export default {
    data(){
        return{
            title:'我的职位',
            to:'/user/position',
            id:0,
            status:"0",
            job:"",
            memberList:"",
            selected:'1',
            popupMore:false,//点击查看更多
            popupEdit:false,//弹出更多操作
            popupInvite:false,//弹出邀请面试面板
            pickerVisible:"",
            index:0,//当前操作的索引
            uid:0,//当前操作的对象
            invite:{//面试信息
             year:'',
             month:'',
             day:'',
             address:"",
             info:""
            },
        }  
    },
    created(){
        this.id=parseInt(this.$route.params.id);
        this.Initialization();
    },
    methods:{
         Initialization(){
            this.$indicator.open();
                setTimeout(() => {
                    Candidate(this.id,this.status).then(res=>{
                    if (res.StatusCode === 200) {
                        this.job = res.Data.Job;
                        this.memberList=res.Data.Members;
                        this.$indicator.close();
                        }
                    });  
            }, 100);
        },
        readMore(){
            this.popupMore=true;
        },
        // 更多操作
        editMore(index,uid){
            this.popupEdit=true;
            this.index=index;
            this.uid=uid;
        },
        //关闭编辑弹出层
        closeEdit(){
            this.popupEdit=false;
            this.index=0;
            this.uid=0;
        },
        //被查看
        BeViewed(uid,jobid,index){
              DeliveryFeedback(uid,jobid,1,"").then(res=>{
                if(res.StatusCode===200&&res.Data)
                {
                    //移除
                    this.memberList.splice(this.index, 1);
                }
                else
                {
                     this.$toast("操作失败请刷新重试");
                }
            });
        },
        //邀请面试

        InviteHandle(status){
            if(status==3)
            {
                 this.popupInvite=true;
                 this.status=3
                 return;
            }
            DeliveryFeedback(this.uid,this.id,this.status,"").then(res=>{
                if(res.StatusCode===200&&res.Data)
                {
                    //移除
                    this.memberList.splice(this.index, 1);
                    this.uid=0;
                    this.index=0;
                    this.popupEdit=false;
                }
                else
                {
                      this.popupEdit=false;
                     this.$toast("操作失败请刷新重试");
                }
            });
        },
        //弹出年月日
        pickerTime(){
            this.$refs.picker.open();
        },
        //为年月日框赋值
        handleConfirm(value){
            this.invite.year=value.getFullYear();
            this.invite.month=value.getMonth();
            this.invite.day=value.getDate();
        },
        // 点击确定关闭弹框
        ok(){
          //面试信息组装
          var msg=this.invite.info+"----->面试时间："+this.invite.year+"年"+this.invite.month+"月"+this.invite.day+"日 -----> 面试地点"+this.invite.address
            DeliveryFeedback(this.uid,this.id,this.status,msg).then(res=>{
                 if(res.StatusCode===200&&res.Data)
                {
                    //移除
                    this.memberList.splice(this.index, 1);
                    this.uid=0;
                    this.index=0;
                    this.popupInvite=false;
                    this.popupEdit=false;
                }
                else
                {
                     this.popupInvite=false;
                     this.popupEdit=false;
                     this.$toast("操作失败请刷新重试");
                }
            });
          //  console.log("xxx->"+this.invite.address+"---->"+this.invite.info);
        },
        // 点击取消关闭弹框
         exit(){
            this.popupInvite=false;
            this.uid=0;
            this.index=0;
        }
    },
    watch: {
    status(val, oldVal) {
      this.Initialization();
    }
  }

}
</script>
<style lang="scss" scoped>
// 项目基本情况
.project-info{
    padding: 17px 12px 0 12px;
    border-bottom: 10px solid #f4f4f4;
    .info-hd{
        .hd-1{
            display: flex;
            justify-content: space-between;
            .title{
                font-size: 16px;
                color:#282828;
                
            }
            .price{
                font-size: 16px;
                color:#fd4f00;
            }
        }
        .hd-2{
            font-size: 14px;
            margin-top: 13px;
            color:#666666;
            display: flex;
            align-items: center;
            span{
                width: 1px;
                height: 13px;
                display: block;
                background: #666666;
                margin:0 10px;
            }
        }
        .hd-3{
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color:#666666;
            padding-bottom: 12px;
            border-bottom: 1px dashed #f4f4f4;
        }

    }
    .info-ft{
        padding: 12px 12px;
        .title{
            font-size: 16px;
            color:#282828;
        }
        .ft-html{
            margin-top:10px;
            font-size: 14px;
            color:#666666;
        }
        .learn-more{
            color:#3887fe;
            text-decoration: underline;
            text-align: right;
            font-size: 14px;
            display: block;
        }

    }
}
.select-menu{
     margin-left: 12px;
     border-bottom: 1px solid #f4f4f4;
    .mint-navbar{
    margin-top:16px;
    width: 304px;
    margin-right: 12px;
   
    .mint-tab-item{
        color:#666666;
    }
    .mint-tab-item.is-selected {
    border-bottom: 2px solid #fd4f00;
    color: #fd4f00;
    margin-bottom: -2px;
}
}

}
.candidate{
    .candidate-item{
        border-bottom: 10px solid #f4f4f4;
         dl{
        margin-top:39.3px;
        margin-left:12px;
        margin-right: 12px;
        display: flex;
        
        dt{
            width: 75px;
            height: 75px;
            img{
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;

            }
        }
        dd{
            margin-left:12px;
            margin-bottom: 23px;
            .dd-p1{
                display: flex;
                align-items: center;
                .p1-name{
                    font-size: 16px;
                    color:#282828;
                }
                .fenge{
                    width: 1px;
                    height: 15px;
                    background: #282828;
                    display: block;
                    margin:0 14px;
                }
                .p1-slogan{
                    background: #3887fe;
                    color:#ffffff;
                    margin-left: 13px;
                }

            }
            .dd-p2{
                margin-top: 12px;
                display: flex;
                span{
                    display: block;
                    padding: 0 2px;
                    border:1px solid #fd4f00;
                    color:#fd4f00;
                    margin-right: 10px;
                    text-align: center;
                }
            }
            .dd-p3{
                margin-top:12px;
                color:#999999;
                font-size: 14px;
                margin-bottom: 12px;
                .read-more{
                    color:#3887fe;
                }
            }
            .dd-p4{
                font-size: 14px;
                color:#999999;
                margin-top: 10px;
                display: flex;
                align-items: center;
                .fenge{
                    width: 1px;
                    height: 13px;
                    background: #999999;
                    display: block;
                    margin:0 11px;
                   
                }
            }
        }
    }
    .item-edit{
      height: 44.6px;
      width: 100%;
      line-height: 44.6px;
      display: flex;
      border-top:1px solid #f4f4f4;
      
      margin-top:18px;
      font-size: 16px;
      justify-content: space-between;
      text-align: center;
      align-items: center;
      div{
        width: 50%;
        color:#999999;
      }
      .edit-left{
        color:#3887fe;
      }
      p{
        width: 1px;
        height: 14px;
        background: #999999;

      }
    }
}

}
   
// 查看更多弹出框
.read-popup{
    width: 390px;
    border-radius: 5px;
    .project-view{
        height: 37.3px;
        line-height: 37.3px;
        font-size: 16px;
        color:#282828;
        text-align: center;
        border-bottom: 1px solid #f4f4f4;    
    }
    .detail{
        margin-top:16px;
        margin-left:12px;
        margin-right: 12px;
        font-size: 14px;
        color:#666666;
        text-indent: 2em;
        margin-bottom: 45px;
        line-height: 1.6;
    }

}
//更多操作
.edit-popup{
    width: 100%;
    padding: 0 12px;
    ul{
        font-size: 16px;
        color:#282828;
        li{
            height: 48px;
            line-height: 48px;
            border-bottom: 1px dashed #dcdcdc;
            text-align: center;
           
        }
        .li-last{
            border-bottom: none;
        }
        
    }
    p{
        height: 60px;
        color:#999999;
        line-height: 60px;
        font-size: 16px;
        text-align: center;
        border-top:1px solid #dcdcdc;
    }
}
//通知面试
.popup-invite{
    width: 390px;
    border-radius: 5px;
    .title{
        font-size: 14px;
        color:#282828;
        text-align: center;
        height: 37px;
        line-height: 37px;
        border-bottom: 1px solid #f4f4f4;
    }
    .time{
        margin-top:12px;
        margin-left:12px;
        margin-right: 12px;
        font-size: 14px;
        display: flex;
        align-items: center;
        .ipt{
            width:17%;
            border:1px solid #dcdcdc;
            height: 22px;
            text-align: center;
            display: block;
            
        }
        .time-s{
            margin:0 8px;
        }
    }
    .address{
        margin-top:20px;
        margin-left:12px;
        margin-right: 12px;
        font-size: 14px;
        display: flex;
        align-items: center;
         input{
            width:75%;
            border:1px solid #dcdcdc;
            height: 22px;
            padding-left: 5px;
           
        }
    }
    .extra{
        margin-top: 16px;
        margin-left:12px;
        margin-right: 12px;
        border-top:1px dashed #999999;
        border-bottom:1px solid #666666;
        textarea{
            width: 100%;
            display: block;
            border:none;
            outline: none;
            padding: 17px 0 50px 0;
            resize: none;
            -webkit-input-placeholder{color:red;}

            
        }
    }
    textarea::-webkit-input-placeholder{
    color:#dcdcdc;
}
    .button-total{
        display: flex;
        padding: 15px 50px;
        justify-content: space-between;
        button{
            width: 69px;
            height: 27px;
            font-size: 14px;

        }
    }
}
.lookresume a{
    color: #3887fe;
}
</style>
